<!-- index.html -->
<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="lobbyProject">
<head>
	<!-- META -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

	<title>Dominion Portal</title>

	<!-- SCROLLS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
	<style>
		html 								{ overflow-y:scroll; }
		body 								{ padding-top:20px; }
		#view_tab,#edit_tab,#home_tab 		{ margin-bottom:30px; }
		.lobby_container					{ display: table; width:100%; height:100% }
		.lobby_container div				{ margin:2%; }
		.user_container, .room_container	{ display: table-cell;float:left;width:45%; height:500px }
		.title_logo							{ text-align:center;margin-bottom:10px }
		.user_form							{ margin-bottom:20px; }
		.user_list							{ overflow-y:auto; height:350px }
		
		.form_text_formatter				{ border-top-right-radius:0;border-bottom-right-radius:0;width:75%;float:left; }
		.form_button_formatter				{ float:left; }
		.room_div							{ background-color:#cccccc; }
		.room_div:hover						{ background-color:#428bca;color: #ffffff; }
		.room_div.full:hover				{ background-color:#FF9999;color: #ffffff; }
		
		.user_div							{ padding:5px }
		.busy								{ background-color:#FF9999;color: #ffffff; }
		
		.unselectableText { 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-o-user-select: none; 
			user-select: none; 
		}
		
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
	<script src="/javascripts/lobby_core.js"></script>
	<script src="/socket.io/socket.io.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="lobbyController">
	<h1 class="title_logo unselectableText"><b>Dominion Portal</b></h1>
	<div class="lobby_container unselectableText">
		<div class="well user_container">
			<div class="user_form">
				<form>
				    <input type='text' id="login_field" class="form-control form_text_formatter" placeholder="username" ng-model='user.name'>
				    <span class="input-group-btn">
				    	<input class="btn btn-default form_button_formatter" type='submit' value='Login' ng-click='login(user)' /> 
				    </span>
				</form>
			</div>
			<b>Users:</b>
			<div class="user_list">
				<div ng-repeat="user in users">
					<div ng-class="{busy: user.in_room}" class="well user_div" style="cursor:default"><b>{{ user.name }}</b></div>
				</div>
				<br>
			</div>
		</div>
		<div class="well room_container">
			<div class="user_form">
				<form>
				    <input type='text' id="room_field" class="form-control form_text_formatter" placeholder="roomname" ng-model='room.name'>
				    <span class="input-group-btn">
				    	<input class="btn btn-default form_button_formatter" type='submit' value='Create Room' ng-click='create_room(room)' /> 
				    </span>
				</form>
			</div>
			<b>Rooms:</b>
			<div class="user_list">
				<div ng-repeat="room in rooms">
					<div ng-class="{full: room.full}" class="well room_div" ng-click='join_room(room)' style="cursor:pointer"><b>{{ room.name }}</b></div>
				</div>
				<br>
			</div>
		</div>
	</div>
</body>
</html>